﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="SampleConfirmations.aspx.cs" Inherits="OpenWaves.ActivityFeed.Web.Tests.Samples.SampleConfirmations" %>

<%@ Register TagPrefix="af" Namespace="OpenWaves.ActivityFeed.Web.Controls" Assembly="OpenWaves.ActivityFeed.Web" %>
<%@ Register Src="~/Samples/SampleDescription.ascx" TagName="SampleDescription" TagPrefix="c" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    
    <style type="text/css" media="all">
        .ui-dialog-buttonset {
            font-size: 10px;
        }
        
        .ui-dialog-content,
        .ui-dialog-title {
            font-size: 14px;
        }  
        
        #message {
            position: fixed;
            top: 50px;
            left: 45%;
            display: inline-block;
            padding: 10px 30px 10px 30px;
            background-color: yellow;
            border-radius: 10px;
            border: solid #ddd 1px;
            
            background: rgb(122,188,255); /* Old browsers */
            /* IE9 SVG, needs conditional override of 'filter' to 'none' */
            background: url();
            background: -moz-linear-gradient(-45deg,  rgb(122,188,255) 0%, rgb(96,171,248) 44%, rgb(64,150,238) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgb(122,188,255)), color-stop(44%,rgb(96,171,248)), color-stop(100%,rgb(64,150,238))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(-45deg,  rgb(122,188,255) 0%,rgb(96,171,248) 44%,rgb(64,150,238) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(-45deg,  rgb(122,188,255) 0%,rgb(96,171,248) 44%,rgb(64,150,238) 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(-45deg,  rgb(122,188,255) 0%,rgb(96,171,248) 44%,rgb(64,150,238) 100%); /* IE10+ */
            background: linear-gradient(-45deg,  rgb(122,188,255) 0%,rgb(96,171,248) 44%,rgb(64,150,238) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
        }

        #message .ui-icon-info,
        #message p,
        #message span {
            display: inline-block;
            vertical-align: middle;
            margin: 0;
            font-weight: bold;
        }
        
        #message p {
            padding-left: 10px;
        }
    </style>
    
    <!--[if gte IE 9]>
        <style type="text/css">
            #message {
                filter: none;
            }
        </style>
    <![endif]-->

    <script type="text/javascript" language="javascript">
        function showMessage(text) {
            var messageEl = $('#displayMessage');
            messageEl.text(text);
            $('#message').show();
            setTimeout(function () {
                $('#message').fadeOut(500);
            }, 2000);

        }

        function confirmRemoveComment(comment) {
            var defer = $.Deferred();

            $("#dialog-confirm #confirmQuestion").text("Comment: '" + comment.text() + "' is going to be removed. Are you sure?");

            $("#dialog-confirm").dialog({
                autoOpen: false,
                close: function () {
                    $(this).dialog('destroy');
                },
                resizable: false,
                height: 200,
                width: 450,
                modal: true,
                buttons: {
                    "Ok": function () {
                        $(this).dialog("close");
                        defer.resolve(true);
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                        defer.resolve(false);
                    }
                }
            });

            $("#dialog-confirm").dialog("open");

            return defer.promise();
        }

        function beforeRemoveUpdate(elem, p2, viewModel) {
            if (elem.nodeType == 1) {
                if (viewModel.removeUpdate.isInProgress()) {
                    $(elem).effect("drop", null, 1000, function() {
                        $(elem).remove();
                    });
                    showMessage('Update was removed');
                }
                else {
                    $(elem).remove();
                }
            }
        }


        function beforeRemoveComment(elem, p2, viewModel) {
            if (elem.nodeType == 1) {
                if (viewModel.removeComment.isInProgress()) {
                    $(elem).effect("explode", null, 1000, function() {
                        $(elem).remove();
                    });
                    showMessage('Comment was removed');
                }
                else {
                    $(elem).remove();
                }
            }
        }

        function afterAddUpdate(elem, a, c, d, e, f) {
            var af = <%=this.af.ClientID %>;
            if (!af.refreshUpdates.isInProgress()) {
                if (elem.nodeType === 1) $(elem).hide().effect("highlight", null, 4000);                
            }
        }

        function afterRenderComment(elem) {
            for (var i = 0, length = elem.length; i < length; i++) {
                if (elem[i].nodeType == 1) {

                    var $elem = $(elem[i]);
                    var newCommentInput = $elem.closest('.comments-list').find('fieldset.submit-comment');
                    $elem.find('.comment-reply').click(function() {
                        newCommentInput.fakeInput('showInput');
                        return false;
                    });
                }
            }
        }

        function afterRenderUpdate(elem) {
            for (var i = 0, length = elem.length; i < length; i++) {
                if (elem[i].nodeType == 1) {

                    var $elem = $(elem[i]);
                    var newCommentInput = $elem.find('fieldset.submit-comment');
                    $elem.find('div.utils .comment-reply').click(function () {
                        newCommentInput.fakeInput('showInput');
                        return false;
                    });
                }
            }
        }

    </script>
</asp:Content>

<asp:Content ContentPlaceHolderID="cphBody" runat="server">


<c:SampleDescription ID="SampleDescription1" runat="server">
    <MessageTemplate>
        <p>This example shows how to implement custom confirmations for deleting updates and comments. When deleting comments jQuery.ui dialog appears instead of standard confirm window. It's implemented by 
        assigning commandConfirm binding:</p>

        <p style="font-weight:bold">
        command: removeComment, commandConfirm: confirmRemoveComment
        </p>
        
        
        <p>Also custom render events was handled (BeforeRemove and AfterAdd).</p>
        <p>When you add new update or comment color effect is triggered.</p>
        <p>After removing update or comment message box information appear.</p>

        <p style="font-weight:bold;">UpdatesSettings-BeforeRemove, UpdatesSettings-AfterAdd, UpdatesSettings-AfterRender, CommentsSettings-BeforeRemove, CommentsSettings-AfterAdd, CommentsSettings-AfterRender        
        </p>
    </MessageTemplate>
</c:SampleDescription>

<h3>Custom confitrmations and render events</h3>
    
    <div id="message" style="display: none">
	    <p><span class="ui-icon ui-icon-info"></span><span id="displayMessage"></span></p>
    </div>

    <div id="dialog-confirm" title="Remove comment?" style="display: none">
	    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><span id="confirmQuestion"></span></p>
    </div>

    <div>
        <af:ActivityFeed runat="server" ID="af" ClientIDMode="AutoID" 
                UpdatesSettings-BeforeRemove="beforeRemoveUpdate" UpdatesSettings-AfterAdd="afterAddUpdate" UpdatesSettings-AfterRender="afterRenderUpdate"
                CommentsSettings-BeforeRemove="beforeRemoveComment" CommentsSettings-AfterAdd="afterAddUpdate" CommentsSettings-AfterRender="afterRenderComment">
            
          <UpdateTemplate>
            <li class="post" data-bind="css: { disabled: removeUpdate.isInProgress }">
                <article>
                   <footer>
                       <figure><img alt="Placeholder image from flickholdr.com" data-bind="attr: { 'src': publisher().profile.photoUrl }"/></figure>                                
                   </footer>
                   <af:UpdateContentPlaceHolder runat="server"></af:UpdateContentPlaceHolder>

                  <div class="utils">
                      <ul>
                          <li><a class="comment-reply" href="javascript:void(0);" title="placeholder">Reply</a></li>
                          <li><a href="#" title="placeholder"  data-bind="text: likedByMe() ?  'Remove like': 'Like this update', command: toggleLike">>Like this update</a></li>
                          <!-- ko if: removeUpdate.isAllowed -->
                          <li><a href="javascript:void(0);" data-bind="command: removeUpdate, commandConfirm: function () { return confirm('Remove update?') }">Delete</a></li>
                          <!-- /ko -->
                          <li data-bind="attr: { 'title': publishedOn() }"><time datetime="2012-05-23T12:12+02:00" data-bind="text: moment(publishedOn()).fromNow()"></time> from <span data-bind="text: source"></span></p></li>
                      </ul>
                  </div>

                  <div class="like-list-container"  data-bind="visible: hasLikes">
                    <span><i class="icon-thumbs-up"></i> Liked by </span>
                    <ul class="liked-list">
                         <!-- ko if: likedByMe -->
                             <li>you</li>
                         <!-- /ko -->

                        <!-- ko foreach: likesExcludingMine().takeUpToMaxOrMin(3, 4) -->
                            <li><a data-bind="attr: { href: user().profile.url }, text: user().profile.name" title="placeholder"></a></li>
                        <!-- /ko -->
             
                        <!-- ko if: likesExcludingMine().length > 4 -->
                            <li><span href="#" data-bind="text: (likesExcludingMine().length - 3) + ' others'" title="placeholder"></span></li>
                        <!-- /ko -->
                    </ul>
                 </div>
           
                  <section class="comments-list">
                    <af:CommentsPlaceHolder runat="server" />
                      <fieldset class="submit-comment right" data-bind="jQuery: 'fakeInput'">
                        <legend class="hidden-visualy">Submit a comment</legend>
                        <textarea cols="48" rows="2" data-bind="valueExt: newCommentText, valueUpdate: 'afterkeydown'"></textarea>
                        <button class="right" data-bind="command: postNewComment">Share</button>
                      </fieldset>                        
                  </section>                            
                </article>
            </li>              
          </UpdateTemplate>
            
            <CommentTemplate>
                <li>
                  <article>
                    <footer>
                        <figure>
                            <img alt="Placeholder image from flickholdr.com" data-bind="attr: { 'src': publisher().profile.photoUrl, 'alt': publisher().profile.name }" width="30px" height="30px" />  
                        </figure>
               
                    </footer>

                    <div class="content-wrapper">
                    <p><a href="#" title="palceholder" data-bind='text: publisher().profile.name'></a></p> 
                    <p data-bind="text: text"></p>
                    </div>
                    <div class="utils">
                        <ul>
                            <li><a class="comment-reply" href="javascript:void(0);" title="placeholder">Reply</a></li>
                            <!-- ko if: removeComment.isAllowed -->
                            <li><a href="#" title="placeholder" data-bind="command: removeComment, commandConfirm: confirmRemoveComment">Delete</a></li>
                            <!-- /ko -->
                            <li data-bind="attr: { 'title': publishedOn() }"><p><time datetime="2012-05-23T12:12+02:00" data-bind="text: moment(publishedOn()).fromNow()"></time></p></li>                
                        </ul>
                
                    </div>
                  </article>
                </li>
            </CommentTemplate>
        </af:ActivityFeed>
    </div>

</asp:Content>
